<template>
  <div id="bookList">
    <div id="search">
      <el-input
        placeholder="搜索图书编号"
        size="small"
        icon="el-icon-search"
        v-model="searchId">
      </el-input>
    </div><!--搜索图书编号框-->
    <div id="add">
      <el-button type="primary" @click="addBook" size="small">添加图书</el-button> <!--添加图书按钮-->
    </div>
    <div id="bookTable">
      <el-table
        :data="filterInfo"
        style="margin-top: 20px">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form inline class="demo-table-expand">
              <el-form-item label="图书编号">
                <span>{{ props.row.bId }}</span>
              </el-form-item>
              <el-form-item label="图书名称">
                <span>{{ props.row.bName }}</span>
              </el-form-item>
              <el-form-item label="图书类型">
                <span>{{ types[props.row.bType-1]}}</span>
              </el-form-item>
              <el-form-item label="出版社名称">
                <span>{{ props.row.bPublish }}</span>
              </el-form-item>
              <el-form-item label="放置位置">
                <span>{{ props.row.bookSituation.bSituation }}:{{ props.row.situation }}</span>
              </el-form-item>
              <el-form-item label="图书数量">
                <span>{{props.row.bCount}}</span>
              </el-form-item>
              <el-form-item label="借阅数量">
                <span>{{ props.row.borrowCount }}</span>
              </el-form-item>
              <el-form-item label="预定人数">
                <span>{{ props.row.reserveNum }}</span>
              </el-form-item>
            </el-form><!--隐藏的信息表单-->
          </template>
        </el-table-column>
        <el-table-column
          label="图书编号"
          prop="bId">
        </el-table-column>
        <el-table-column
          label="图书名称"
          prop="bName">
        </el-table-column>
        <el-table-column
          label="图书作者"
          prop="bAuthor">
        </el-table-column>
        <el-table-column
          label="上下架"
          prop="bBoolean">
          <template slot-scope="props">
            <span v-if="props.row.bBoolean === parseInt('0')">已上架 <el-button @click="remoteBook(props.row.bId)" type="text" size="small">下架</el-button></span>
            <span v-else>下架 <el-button @click="putBook(props.row.bId)" type="text" size="small">上架</el-button></span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          prop="bAuthor">
          <template slot-scope="props">
            <el-button type="primary" icon="el-icon-edit" @click="editBook(props.row)" size="small"></el-button>
            <el-button type="primary" icon="el-icon-delete" @click="delete_Book(props.row.bId)" size="small"></el-button>
          </template>
        </el-table-column>
      </el-table><!--图书信息表格-->
    </div>
    <el-dialog title="图书信息" :visible.sync="displayShow" class="dialog" >
      <el-form :model="addInfo" :rules="rules" ref="addInfo" label-width="100px">
        <el-form-item label="图书名称" prop="bName" class="formName">
          <el-input v-model="addInfo.bName" class="form"></el-input>
        </el-form-item>
        <el-form-item label="图书作者" prop="bAuthor" class="formName">
          <el-input v-model="addInfo.bAuthor" size="small" class="form"></el-input>
        </el-form-item>
        <el-form-item label="出版社" prop="bPublish" class="formName" style="margin-left:5px">
          <el-input v-model="addInfo.bPublish" size="small" class="form"></el-input>
        </el-form-item>
        <el-form-item label="图书类型" prop="bType" class="formName" >
          <el-select v-model="addInfo.bType" placeholder="请选择图书类型">
            <!--          bType: 1.悬疑恐怖类 2.情感类 3.科幻类 4.教育类 5.科学科技类 6.古典小说类-->
            <el-option label="悬疑恐怖类" value="悬疑恐怖类"></el-option>
            <el-option label="情感类" value="情感类"></el-option>
            <el-option label="科幻类" value="科幻类"></el-option>
            <el-option label="教育类" value="教育类"></el-option>
            <el-option label="科学科技类" value="科学科技类"></el-option>
            <el-option label="古典小说" value="古典小说类"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="放置位置" prop="bSituation" class="formName" size="small">
          <el-input v-model="addInfo.bSituation" size="small" class="form"></el-input>
        </el-form-item>
        <el-form-item label="图书数量" prop="bCount" class="formName" size="small">
          <el-input v-model="addInfo.bCount" size="small" class="form"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sureButton('addInfo')" style="margin-left: 40%;margin-top: 20px">确定</el-button>
          <el-button @click="closeButton">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog><!--添加修改弹框-->
    <Pages @getInfo="getAllBook" class="page" :total="total" :pageSize="pageSize"></Pages> <!--分页-->
  </div>
</template>


<script>
  import { getBookList, //获取图书列表
          editBookInfo, //编辑图书信息
          pullOffBook, //上下架图书
          deleteBook, //删除图书
          addBookInfo, //新增图书
          } from "../../../api/bookList"
  import Pages from "../../../components/pages/Pages"
import { Cascader } from 'element-ui'
  export default {
    name:"list",
    components:{ // 组件
      Pages
    },
    data () {
      return {
        bookList: [], // 总书籍列表
        currentPage: 1, // 默认显示第一页
        pageSize: 5, // 每页显示五条
        total: 150, // 总数
        searchId: '', // 搜索Id
        displayShow: false, // 表单是否显示
        operationType: 1, // 由于新增和修改用的是同一个弹框，所以设置1，2来判断当前需要执行新增还是修改。1新增 2 修改
        addInfo: { // 新增书籍列表
          bId: 0,
          bName: '',
          bType: '',
          bAuthor: '',
          bPublish: '',
          bSituation: '',
          bCount:''
        },
        types:["悬疑恐怖类","情感类","科幻类","教育类","科学科技类","古典小说类"], // 书籍类型// bType: 1.悬疑恐怖类 2.情感类 3.科幻类 4教育类 5.科学科技类 6.古典小说类
        rules: { // 表单规则
          bName: [
            { required: true, message: '请输入图书名称', trigger: 'blur' },
            { min: 3, message: '至少3位字符', trigger: 'blur' }
          ],
          bType: [
            { required: true, message: '请选择图书类型', trigger: 'change' }
          ],
          bAuthor: [
            { required: true, message: '请输入图书作者名', trigger: 'blur' },
          ],
          bPublish: [
            { required: true, message: '请输入图书出版社名称', trigger: 'blur' },
          ],
          bSituation: [
            { required: true, message: '请输入图书放置位置', trigger: 'blur' },
          ],
          bCount: [
            { required: true, message: '请输入图书数量', trigger: 'blur' },
          ]
        }
      }
    },
    mounted(){ // 初始化页面后调用
      this.getAllBook()
    },
    computed: {
      filterInfo () { // 根据输入的图书ID过滤信息
        const {searchId, bookList} = this

        let fInfo
        if (searchId !== '') {
          fInfo = bookList.filter(p => p.bId === parseInt(searchId))
        } else {
          fInfo = this.bookList
        }
        return fInfo
      }
    },
    methods: {
      handleCurrentChange(val) { // 显示第几页
        this.currentPage=val // 改变默认的页数
      },
      getAllBook (val){ // 从后端获取所有图书列表
        if(!val) val = 1 // 没有当前页数时
        let requestData = {
          pageNum: parseInt(val)
        }
        getBookList(requestData).then(res=>{
          //console.log(res)
          this.bookList = res.data.data.datas // 书籍列表
          this.total = res.data.data.totalNum // 总页数
        }).catch(err=>{
          console.log('err')
        })
      },
      remoteBook (bId) { // 下架图书
        this.$confirm('此操作将下架该图书, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.putOffBook(bId,1),
          this.$message({
            type: 'success',
            message: '下架成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '下架失败'
          });
        });
      },
      putBook (bId) { // 上架图书
        this.$confirm('此操作将上架该图书, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.putOffBook(bId,0),
          this.$message({
            type: 'success',
            message: '上架成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '上架失败'
          });
        });
      },
      /*上下架图书*/
      putOffBook(bId,status){
        let requestData = {
          bookId:bId,
          bBoolean:status
        }
        pullOffBook(requestData).then(res=>{
          this.getAllBook(1)
        }).catch(err=>{
          console.log(err)
        })
      },
      delete_Book (bId) { // 删除图书
        let requestData = {
          ids:bId
        }
        this.$confirm('此操作将删除该图书, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteBook(requestData).then(res=>{
            this.getAllBook(1)
          }).catch(err=>{
            console.log(err)
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '删除失败'
          });
        });
      },
      editBook (book) { // 编辑图书
        this.operationType = 2 // 设置operationType为2
        this.displayShow = true // 显示弹出层
        this.addInfo.bId = book.bId // 获取修改的图书ID

        this.addInfo.bName = book.bName
        this.addInfo.bAuthor = book.bAuthor
        this.addInfo.bPublish = book.bPublish
        this.addInfo.bSituation = book.situation
        this.addInfo.bType =this.types[book.bType-1]
        this.addInfo.bCount = book.bCount
      },
      addBook () { // 添加图书
        this.displayShow = true // 显示表单
        this.operationType = 1 // 将operationType转换为1，就是将确定按钮执行新增操作。

        // 将弹出层中的数据设置为空
        this.addInfo.bName = ''
        this.addInfo.bAuthor = ''
        this.addInfo.bPublish = ''
        this.addInfo.bSituation = ''
        this.addInfo.bType = ''
        this.addInfo.bCount = ''
      },
      //bType: 1.悬疑恐怖类 2.情感类 3.科幻类 4.教育类 5.科学科技类 6.古典小说类-->
      sureButton (formName) { // 添加/修改的确定按钮
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let type = 0
            switch(this.addInfo.bType){
              case '悬疑恐怖类':this.type = 1;break
              case '情感类':this.type = 2;break
              case '科幻类':this.type = 3;break
              case '教育类':this.type = 4;break
              case '科学科技类':this.type = 5;break
              case '古典小说类':this.type = 6;break
            }
            console.log(this.operationType)
            if (this.operationType === 1){ // 新增
                console.log("新增")
              let requestData = {
                bName:this.addInfo.bName,
                bType:this.type,
                bAuthor:this.addInfo.bAuthor,
                bPublish:this.addInfo.bPublish,
                situation:this.addInfo.bSituation,
                bCount:parseInt(this.addInfo.bCount)
              }
              addBookInfo(requestData).then(res=>{
                this.displayShow = false
                this.getAllBook(1)
                this.$message({
                  type: 'success',
                  message: '新增成功!'
                });
              }).catch(err=>{
                console.log(err)
                this.$message({
                  type: 'info',
                  message: '新增失败!'
                });
              })
            } else { // 修改
              let requestData = {
                bId:this.addInfo.bId,
                bName:this.addInfo.bName,
                bType:this.type,
                bAuthor:this.addInfo.bAuthor,
                bPublish:this.addInfo.bPublish,
                situation:this.addInfo.bSituation,
                bCount:parseInt(this.addInfo.bCount)
              }
              editBookInfo(requestData).then(res=>{
                console.log(requestData)
                this.displayShow = false
                this.getAllBook(1)
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
              }).catch(err=>{
                console.log(error)
                this.$message({
                  type: 'ifno',
                  message: '修改失败!'
                });
              })
            }
          } else {
              console.log()
            console.log('error submit!!');
            return false;
          }
        });
      },
      closeButton () { // 关闭dialog
        this.displayShow = false
      }
    },

  }
</script>

<style lang="scss" scoped>
  #bookList {
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  #search {
    float: left;
    width: 49%;
  }
  #add {
    float: left;
    width: 10%;
    margin-left: 10px;
  }
  .form {
    margin-right: 20px;
    width: 80%;
  }
  .formName {
    margin-top: 30px;
  }
  #bookTable {
    padding-top: 20px;
  }
  .page {
    margin-top: 10px;
    text-align:center
  }
}
</style>>

